<template>
  <div class="cremation_statistics overflowY" v-loading="loading">
    <div class="PageContent">
      <el-form
        :model="ruleForm"
        :inline="true"
        :rules="rules"
        ref="ruleForm"
        @submit.native.prevent
        label-width="100px"
      >
        <div class="PageItem margintop20">
          <el-row class="paddingleft2em">
            <el-form-item prop="reserveDate">
              <el-date-picker
                v-model="ruleForm.reserveDate"
                type="year"
                placeholder="选择年"
                :picker-options="pickerOptions"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                icon="el-icon-search"
                v-if="btnRight.btnSearch"
                @click="submitForm('ruleForm')"
                >查询</el-button
              >
            </el-form-item>
          </el-row>
        </div>
      </el-form>
      <div class="PageItem">
        <div id="myPieCharts" ref="myPieCharts"></div>
      </div>
    </div>
  </div>
</template>

<script>

import * as API from '@/api/civilAffairsBureau/index'
export default {
  data() {
    return {
      loading: false, //加载
      myPieCharts: null, //饼图
      allPieData: [], //返回饼图数据
      ruleForm: {
        reserveDate: "", //日期
      },
      pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          },
      },
      //按钮权限
        btnRight: {
          btnSearch: false,

        },
      rules:{
        reserveDate:[
          { required: true, message: '请输入年份', trigger: 'blur' }
        ]
      }
    };
  },
  created() {
    setTimeout(() => {
      this.getPieData();
    }, 1000);
  },
  mounted() {
    //按钮权限
      this.btnRight = this.$route.meta.buttons;
      //遍历属性赋值将true与false字符串转换成布尔型的值
      for (var key of Object.keys(this.btnRight)) {
        this.btnRight[key] =
          this.btnRight[key] || this.btnRight[key] == "true" ? true : false;
      }
    //初始化时间
    this.defaultValue()
    //初始化饼图表
    this.initMyPieCharts();
    window.removeEventListener("resize", () => {
      this.myPieCharts.resize();
    });
  },
  methods: {
    //默认初始值方法
    defaultValue() {
      //默认查询开始结束时间为当天
      this.ruleForm.reserveDate = this.$dayjs(new Date()).format("YYYY");
    },
    //表单提交
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
          if (valid) {
            this.getPieData()
          } else {
            //console.log('error submit!!');
            return false;
          }
        });
    },
    //初始化饼图图表
    initMyPieCharts() {
      this.myPieCharts = this.$echarts.init(this.$refs.myPieCharts);
      const initOption = {
        color: [
          "#37a2da",
          "#32c5e9",
          "#9fe6b8",
          "#ffdb5c",
          "#ff9f7f",
          "#fb7293",
          "#8378ea",
        ],
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        toolbox: {
          show: true,
        },
        legend: {
          bottom: 0,
          textStyle: {
            color: "#8C8C8C",
          },
        },
        series: [],
      };
      this.myPieCharts.setOption(initOption);
    },
    //获取饼图数据
    async getPieData() {
      this.myPieCharts.showLoading()
      this.allPieData=[]
      let params={
          reserveDate:this.$dayjs(this.ruleForm.reserveDate).format("YYYY"),
        }
        const res = await API.findMonthDieCauses(params)
      this.myPieCharts.hideLoading();
        // console.log("sss",res);
        if(res.code==1 ){
          if(res.data && res.data.length==0){
            this.$message.error('暂无数据');
            return
          }
          if(res.data==null){
            let obj={
              name:'暂无数据',
              value:0
            }
            this.allPieData.push(obj)
          }else {
            res.data.forEach(item=>{
              let obj={
                name:item.dieCauses,
                value:item.dieNumer
              }
              this.allPieData.push(obj)
            })
          }

        }else{
          this.$message.error('数据读取失败');
        }
      this.updatePieChart();
    },
    //更新饼图
    updatePieChart() {

      const dataOption = {
        series: [
          {
            name: "死亡原因追踪",
            type: "pie",
            radius: [0, 200],
            data: this.allPieData,
          },
        ],
      };

      this.myPieCharts.setOption(dataOption);
      this.myPieCharts.hideLoading();
    },
  },
  destroyed() {
    window.removeEventListener("resize", () => {
      this.myPieCharts.resize();
    });
  },
};
</script>

<style lang="scss" scoped>
.cremation_statistics {
  width: 100%;
  .PageItem {
    height: auto;
  }
  .PageContent /deep/ .el-input {
    width: 300px;
  }
  .PageContent /deep/ .el-select {
    width: 300px;
  }
  #myPieCharts {
    width: 600px;
    height: 500px;
    margin: 0 auto;
  }
}
</style>
